<template>
  <div>
    <Address-Header title="新增地址"></Address-Header>
    <div class="address">
      <div class="address-box">
        <label for="">收货人：</label>
        <input type="text" v-model="name" placeholder="收货人姓名">
      </div>

      <div class="address-box">
        <label for="">手机号码：</label>
        <input type="text" v-model="phone" placeholder="收货人的手机号码">
      </div>




      <div class="address-box">
        <label for="">省：</label>
        <el-select
          v-model="sheng"
          @change="choseProvince"
          placeholder="">
          <el-option
            v-for="item in province"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>

      <div class="address-box">
        <label for="">市：</label>
        <el-select
          v-model="shi"
          @change="choseCity"
          placeholder="">
          <el-option
            v-for="item in city"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>

      <div class="address-box">
        <label for="">区：</label>
        <el-select
          v-model="qu"
          @change="choseDistrict"
          placeholder="">
          <el-option
            v-for="item in district"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>

      <div class="address-box">
        <label for="">详细地址：</label>
        <input type="text" v-model="detail" placeholder="详细街道地址">
      </div>
      <div class="address-box">
        <el-checkbox v-model="isDefault">设为默认地址</el-checkbox>
      </div>
    </div>

    <div class="footer">
      <a @click="btn">保存地址</a>
    </div>
  </div>
</template>

<script>
  import AddressHeader from "../common/header";
  import {mapGetters, mapMutations} from "vuex";
  import {Toast} from "mint-ui";
  import {req} from "../api/axiosFun";
  import {baseUrl} from "../api/api";

  export default {
    name: "add_address",
    data() {
      return {
        isDefault:false,
        province: [],
        sheng: {},
        shi: {},

        qu: {},

        city: [],
        district: [],


        name: "",
        phone: "",
        zone: "",
        detail: "",

      };
    },
    created() {
      req('post', baseUrl + 'region/list', {
        pid: 0
      })
        .then(res => {
          console.log("address add res:" + JSON.stringify(res));
          this.province = res.data
          this.sheng=this.province[0]
        })
    },
    components: {
      AddressHeader
    },
    methods: {
      choseProvince(value) {
        console.log("privince:" + JSON.stringify(value));
        req('post', baseUrl + 'region/list', {
          pid: value
        })
          .then(res => {
            console.log("address add res:" + JSON.stringify(res));
            this.city = res.data
            this.shi=this.city[0]
          })
        this.sheng = value
      },
      choseCity(value) {
        req('post', baseUrl + 'region/list', {
          pid: value
        })
          .then(res => {
            console.log("address add res:" + JSON.stringify(res));
            this.district = res.data
            this.qu=this.district[0]
          })
        this.shi = value

      },
      choseDistrict(value) {
        this.qu = value

      },
      btn() {
        if (
          this.name == "" ||
          this.phone == "" ||

          this.detail == "" ||
          this.sheng=="" ||
          this.shi=="" ||
          this.qu==""
        ) {
          Toast({
            message: "信息请填写完整",
            duration: 950
          });
        } else {
          let user = localStorage.getItem('userdata')
          let userInfo = JSON.parse(user).userInfo
          let data={
            userId:userInfo.id,
            address:{
              name:this.name,
              mobile:this.phone,
              userId:userInfo.id,
              provinceId:this.sheng,
              cityId:this.shi,
              areaId:this.qu,
              address:this.detail,
              isDefault:this.isDefault

            }
          }
          let json = JSON.stringify(data);
          // var data = {
          //   name: this.name,
          //   phone: this.phone,
          //   zone: this.zone,
          //   detail: this.detail
          // };
          console.log("data:" + JSON.stringify(data));
          // this.axios({
          //   method: 'post',
          //   url: baseUrl + 'address/save',
          //   data: json
          // })
          this.axios.post(baseUrl + 'address/save',data)
          // req('post',baseUrl+'address/save',data)
            .then(res=>{
              console.log("res:" + JSON.stringify(res));

            })
          // this.$store.dispatch("setAddress", data)
          this.$router.back();
        }
      }
    }
  };
</script>

<style lang="stylus" scoped>
  .address {
    padding-top: 1.45rem;

    .address-box {
      width: 100%;
      height: 1.5rem;
      line-height: 1.5rem;
      background: #fff;

      label {
        width: 30%;
        height: 100%;
        padding-left: 0.58rem;
        font-size: 0.4rem;
        display: block;
        float: left;
      }

      input {
        width: 70%;
        font-size: 0.4rem;
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.3rem;
    border-top: 1px solid #e0e0e0;
    background: #ffffff;

    a {
      float: none;
      display: block;
      margin: 0.18rem auto;
      text-align: center;
      width: 95%;
      height: 0.9rem;
      line-height: 0.9rem;
      border-radius: 20px;
      font-size: 0.28rem;
      color: #fff;
      background-color: #00acff;
    }
  }
</style>
